<template>
  <div>
      <div class="w-50">
          <h1>作业一</h1>
          <div v-show="!show">
              <input class="form-control form-control-lg w-50 my-2" type="text" placeholder="请输入账号" v-model="acc" @keyup.enter="handler">
              <input class="form-control form-control-lg w-50" type="password" placeholder="请输入密码" v-model="pwd" @keyup.enter="handler">
          </div>
          <div v-show="show">
              <div class="alert alert-danger" role="alert">
                输入账号或有误!
              </div>
          </div>
      </div>

      <div>
          <h1>作业二</h1>
          <table class="w-100 table">
      <thead class="table-dark">
          <tr>
              <th></th>
              <th>商品名称</th>
              <th>商品单价（元/台）</th>
              <th>数量（台）</th>
              <th>操作</th>
          </tr>
      </thead>
      <tbody>
        <template v-if="list.length > 0">
          <tr v-for="item in list ">
          <td>{{ item.pid }}</td>
          <td>{{item.pname}}</td>
          <td>{{ item.price }}</td>
          <td>
            <button @click="handlerIncrease($event, item.pid ,item.number)" type="button" class="btn btn-outline-danger">-</button>
            {{ item.number }}
            <button @click="handlerReduce($event, item.pid)" type="button" class="btn btn-outline-success">+</button>
          </td>
          <td>
            <button @click="del($event, item.pid)" type="button" class="btn btn-outline-danger">删除</button>
          </td>
        </tr>
        </template>
        <template v-else>
          <tr>
            <td>暂无数据</td>
          </tr>
        </template>
       
      </tbody>
    </table>
    <hr>
    <h2 v-show="list.length > 0">总计: {{ list.reduce( (acc, item)=>acc+(item.price*item.number) ,0) }} 元</h2>
      </div>
  </div>
</template>

<script setup>
/*
制作一个登录表单登录用户名与登录密码。
1、登录用户名不能包含数字信息内容，如果包含数字信息则给予错误信息提示。
2、登录密码长度控制在6~10个字符之间，如果输入登录密码长度超出规定长度则
给予错误信息提示。
请示用 侦听器完成
*/
import { ref,watch } from 'vue';

let acc = ref(null)

let pwd = ref(null)

let show = ref(false)

let reg = /[^0-9]/g

let reg2 = /^.{6,10}$/

watch([acc,pwd],()=>{
  // console.log(acc.value,pwd.value);
})

const handler = e => {
  // console.log('回车事件');
  // console.log(reg.test(acc.value));
  if(reg.test(acc.value) && reg2.test(pwd.value)){
      console.log('登录成功');
  }else show.value = true
}


const list = ref([
{
     pid: '1',
     pname: 'IPhoneX',
     price: 7999,
     number:1
   },
   {
     pid: '2',
     pname: '荣耀16',
     price: 2399,
     number:1
   },
   {
     pid: '3',
     pname: '华为P22',
     price: 3399,
     number:1
   },
   {
     pid: '4',
     pname: '小米9',
     price: 3999,
     number:1
   },

]);

// 删除事件
const del = (e, _pid) => {
 list.value = list.value.filter(item => item.pid != _pid);
}

// 操作对应票据的数量
const handlerIncrease = (e, _pid ,_number) => {
 if(_number > 1){
   list.value.forEach( item => {
        if(_pid == item.pid){
           item.number -= 1
           // console.log(_pid);
       }
   })
   console.log(_number);
 }
}
const handlerReduce = (e, _pid) => {
//   console.log(_pid);
   list.value.forEach( item => {
        if(_pid == item.pid){
           item.number += 1
           // console.log(_pid);
       }
   })
}

</script>

<style lang="scss" scoped>

</style>